<template>
  <div>
    <!-- 1.商品列表顶部导航区域 -->
    <nav-comp :back="true" title="商品列表"></nav-comp>

    <!-- 2.head区域 -->
    <div class="head">
      <!-- <div class="search"> -->
      <van-search
        shape="round"
        background="rgba(0,0,0,0)"
        placeholder="请输入搜索关键词"
      />
      <!-- </div> -->
      <div class="sortbox">
        <div class="sort">
          <div>综合排序</div>
          <div>销量</div>
          <div>
            <span>价格</span>
            <img src="../../assets/img/icon/sort.png" />
          </div>
          <div>好评度</div>
          <div>店铺</div>
        </div>
        <div class="filter">
          <img src="../../assets/img/icon/filter.png" />
          <span>筛选</span>
        </div>
      </div>
    </div>

    <!-- 3. 间隔槽-->
    <gap-comp :height="2.5"></gap-comp>

    <!-- 4.商品列表区域 -->
    <!-- 4.1下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 4.2上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <van-card
          v-for="item in goodList"
          :key="item.id"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="$pre + item.img"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateid: "", //商品分类id
      type: "", //分类类型
      page: 1, //页码
      size: 6, //每次请求数据的条数（分页偏移量）
      goodList: [], //商品列表数据
      loading: false, //是否处于加载状态:bool (没有加载数据：false 数据加载中：true)
      finished: false, //是否已加载完成:bool(有更多数据：false 已完成全部数据加载：true)
      refreshing: false, //是否处于更新中状态:bool (没有加载数据：false 数据加载中：true)
    };
  },
  mounted() {
    // 1.获取商品分类页面跳转过来传递的参数
    this.cateid = this.$route.query.cateid;
    this.type = this.$route.query.type;
    // 2.获取商品列表数据
    this.getList();
  },
  methods: {
    // 1.获取商品列表数据ist

    getList() {
      // 1.1解构获取请求参数
      let { cateid, type, page, size } = this;
      this.$api
        .reqGoodList({ cateid, type, page, size })
        .then((res) => {
          this.goodList = res.goodData;
        })
        .catch((err) => console.log(err));
    },
    // 2.监听页面上拉触底事件
    onLoad() {
      // // console.log('页面触底了')
      // setTimeout(() => {
      //     ++this.page
      //     this.getList()
      // }, 1000)
    },
    // 3.监听用户的下拉动作
    onRefresh() {
      // // console.log('下拉刷新了...')
      // setTimeout(() => {
      //     this.finished = false//再次打开加载更多数据的开关
      //     this.page = 1//最新的数据在第一页
      //     this.goodList = []//赋空旧数据展示新数据
      //     this.getList()//重新获取第一页新数据
      // }, 1000)
    },
    // 4.跳转到商品的详情页面
    // goDesc(id) {
    //     // this.$router.push('/gooddesc?id=' + id)
    // }
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/goodlist.less";
</style>
